<template>
	<view>
		<view class="map">
			<view class="map-wrap">
				<map id="map" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers"
				 :include-points="covers">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BD09ToGCJ02
	} from '../utils/gcoord.js'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import $DB from '@/utils/debounce.js'
	export default {
		data() {
			return {
				id: '', // 司机id
				latitude: 0,
				longitude: 0,
				covers: [], // 地图上的标记点
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.initMap();
		},
		onShow() {
			this.getCoversAndDrawLine() // 获取站点
		},
		methods: {
			// 获取站点
			getCoversAndDrawLine() { // 获取地图上的标记点
				this.$http.get(this.$api.driverLocation + '?driverId=' + this.id).then(res => {
					if (res.code === 200) {
						this.getLocation();
						let result = BD09ToGCJ02({
							latitude: res.data.lat - 0,
							longitude: res.data.lng - 0
						})
						this.covers.unshift({
							id: 0,
							latitude: result[1],
							longitude: result[0],
							iconPath: '/static/imgs/icons/rent-icon.png',
							callout: {
								content: '司机',
								display: 'ALWAYS'
							},
							width: 32,
							height: 32,
						})

						this.getBusStation()

					}
				})
			},
			// 初始化地图
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
			},
			// 当前的经纬度当前的位置
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success:async function(res) {
						let {
							latitude,
							longitude
						} = res
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						// #ifdef H5
						let data =await _this.exchangeDingwei(latitude, longitude)
						_this.curChoosedAddress = data.result
						// #endif
						_this.covers.unshift({
							id: 0,
							latitude,
							longitude,
							iconPath: '/static/imgs/icons/now.png',
							callout: {
								content: '当前位置',
								display: 'ALWAYS'
							},
							width: 34,
							height: 34,
						})


					}
				});
			},
			// 地址逆解析
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						_this.curChoosedAddress = res.result
					},
				});
			},
			getBusStation() {
				let mapCtx = uni.createMapContext("map", this)
				let padding = [100, 0, 100, 0]
				let points = this.covers
				mapCtx.includePoints({
					points,
					padding
				})
			}
		}
	}
</script>

<style>

</style>
